﻿@{
    ViewBag.Title = "产品分类";
    var list = ViewData["list"] as List<Pay.DTO.category_ex>;
    var domain = ViewData["url"] as string;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>分类</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" type="text/css" href="~/Content/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/gelunbu.css" />
</head>

<body>
    <!--header-->
    <div class="header" style="height: 64px;">
        <div class="search" style="margin-top:10px;">
            <form action="" method="post" id="search-form">
                <input type="text" value="" placeholder="" autocomplete="off" class="search_ipt" />
                <a href="javascript:;" class="header_msg"></a>
            </form>

        </div>

    </div>

    <div class="classify">
        <ul class="classify_left_nav">
            @if (list != null && list.Count > 0) {
                var index = 1;
                foreach (var item in list) {
                    if (index == 1) {
                <li class="active" onclick="load('@item.id')">
                    <span class="classify_lines"></span>@item.name
                </li>
                    } else {
                <li onclick="load('@item.id')">
                    @item.name
                </li>
                    }
                    index++;
                }
            }

        </ul>

        <div class="classitfy_right_list">
            <section class="class_pro_list" style="display: block;">
                <ul class="class_pro_contain">
                  @Html.Raw(ViewData["html"])
                </ul>
            </section>
        </div>
    </div>

    <!--底部导航-->
    <div class="fixed_nav">
        <ul class="fixed_nav_container">
            <li>
                <a href="/Home/Index">
                    <i class="fnav_icon_box icon_1"></i> 首页
                </a>
            </li>
            <li>
                <a href="/Product/ProductCategory" class="nav_hover">
                    <i class="fnav_icon_box icon_hover_2"></i> 分类
                </a>
            </li>
            <li>
                <a href="/ShopCart/ShopCartList/">
                    <i class="fnav_icon_box icon_3"></i> 购物车
                </a>
            </li>
            <li>
                <a href="/User/UserInfo">
                    <i class="fnav_icon_box icon_4"></i> 我的
                </a>
            </li>
        </ul>
    </div>
    <script src="~/Content/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".classify_left_nav li").click(function () {
                $(this).addClass('active').siblings().removeClass("active");
            });
        });
        function load(id) {
            var html = "";
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/Product/GetData",//url
                data: { Id:id},
                success: function (result) {
                    var domain = '@domain';
                    if (result.code == 1000) {
                        if (result.data.rows != null && result.data.rows.length > 0) {
                            for (var index = 0; index < result.data.rows.length; index++) {
                                var src = domain + result.data.rows[index].first_image;
                                if (result.data.rows[index].name.length > 10) {
                                    html = html + "<li><a href='/Product/ProductDetail/" + result.data.rows[index].id + "'> <img src='" + src + "' class='class_pic' /> <p class='class_title'>" + result.data.rows[index].name.substring(0, 10) + "</p>  </a> </li>";
                                }
                                else {
                                    html = html + "<li><a href='/Product/ProductDetail/" + result.data.rows[index].id + "'> <img src='" + src + "' class='class_pic' /> <p class='class_title'>" + result.data.rows[index].name + "</p>  </a> </li>";
                                }
                                }
                        }
                    }
                    $(".class_pro_contain").html(html);
                },
                error: function () {
                    alert("异常！");
                }
            });
        }

    </script>
</body>

</html>